<template>
  <div class="user-profile">
    <!-- 用户信息头部 -->
    <div class="profile-header">
      <div class="profile-banner">
        <div class="banner-overlay">
          <div class="profile-info">
            <div class="avatar-container">
              <el-avatar :size="120" class="profile-avatar">
                <img src="/images/avatars/微信图片_20251027113131.jpg" alt="用户头像" />
              </el-avatar>
              <el-button type="primary" size="small" class="edit-avatar-btn">
                <el-icon><Camera /></el-icon>
                更换头像
              </el-button>
            </div>
            <div class="user-details">
              <h1 class="username">{{ userInfo.name || '用户名' }}</h1>
              <p class="user-email">{{ userInfo.email || 'user@example.com' }}</p>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="stat-number">{{ userStats.videos }}</span>
                  <span class="stat-label">视频</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">{{ userStats.followers }}</span>
                  <span class="stat-label">粉丝</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">{{ userStats.following }}</span>
                  <span class="stat-label">关注</span>
                </div>
                <div class="stat-item">
                  <span class="stat-number">{{ userStats.likes }}</span>
                  <span class="stat-label">获赞</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="profile-content">
      <div class="content-container">
        <!-- 侧边栏 -->
        <el-aside width="300px" class="profile-sidebar">
          <el-menu
            :default-active="activeMenu"
            @select="handleMenuSelect"
            background-color="#ffffff"
            text-color="#374151"
            active-text-color="#667eea"
          >
            <el-menu-item index="overview">
              <el-icon><User /></el-icon>
              <span>个人概览</span>
            </el-menu-item>
            <el-menu-item index="videos" @click="goToPage('/user/videos')">
              <el-icon><VideoPlay /></el-icon>
              <span>我的视频</span>
            </el-menu-item>
            <el-menu-item index="favorites" @click="goToPage('/user/collections')">
              <el-icon><Star /></el-icon>
              <span>我的收藏</span>
            </el-menu-item>
            <el-menu-item index="history" @click="goToPage('/user/history')">
              <el-icon><Clock /></el-icon>
              <span>观看历史</span>
            </el-menu-item>
            <el-menu-item index="settings" @click="goToPage('/user/settings')">
              <el-icon><Setting /></el-icon>
              <span>账户设置</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="profile-main" style="padding: 0;">
          <!-- 个人概览 -->
          <div v-if="activeMenu === 'overview'" class="overview-section">
            <div class="section-header">
              <h2>个人概览</h2>
              <el-button type="primary" @click="editProfile">
                <el-icon><Edit /></el-icon>
                编辑资料
              </el-button>
            </div>
            
            <div class="overview-grid">
              <div class="overview-card">
                <h3>最近活动</h3>
                <div class="activity-list">
                  <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                    <el-icon class="activity-icon"><VideoPlay /></el-icon>
                    <div class="activity-content">
                      <p class="activity-text">{{ activity.text }}</p>
                      <span class="activity-time">{{ formatTime(activity.time) }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="overview-card">
                <h3>热门视频</h3>
                <div class="hot-videos">
                  <div v-for="video in hotVideos" :key="video.id" class="hot-video-item" @click="goToDetail(video.id)">
                    <img :src="video.thumbnail" :alt="video.title" class="hot-video-thumb" />
                    <div class="hot-video-info">
                      <h4>{{ video.title }}</h4>
                      <p>{{ formatViews(video.views) }} 次观看</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 我的视频 -->
          <div v-if="activeMenu === 'videos'" class="videos-section">
            <div class="section-header">
              <h2>我的视频</h2>
              <el-button type="primary" @click="uploadVideo">
                <el-icon><Plus /></el-icon>
                上传视频
              </el-button>
            </div>
            
            <div class="video-tabs">
              <el-tabs v-model="videoTab" @tab-change="handleVideoTabChange">
                <el-tab-pane label="全部视频" name="all"></el-tab-pane>
                <el-tab-pane label="已发布" name="published"></el-tab-pane>
                <el-tab-pane label="草稿箱" name="draft"></el-tab-pane>
                <el-tab-pane label="已删除" name="deleted"></el-tab-pane>
              </el-tabs>
            </div>
            
            <div class="video-grid">
              <div v-for="video in userVideos" :key="video.id" class="video-card" @click="goToDetail(video.id)">
                <div class="video-thumbnail">
                  <img :src="video.thumbnail" :alt="video.title" />
                  <div class="video-duration">{{ video.duration }}</div>
                  <div class="video-status" :class="video.status">{{ getStatusText(video.status) }}</div>
                </div>
                <div class="video-info">
                  <h4 class="video-title">{{ video.title }}</h4>
                  <p class="video-description">{{ video.description }}</p>
                  <div class="video-stats">
                    <span class="views">{{ formatViews(video.views) }} 次观看</span>
                    <span class="likes">{{ video.likes }} 点赞</span>
                    <span class="date">{{ formatDate(video.created_at) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 我的收藏 -->
          <div v-if="activeMenu === 'favorites'" class="favorites-section">
            <div class="section-header">
              <h2>我的收藏</h2>
              <el-button @click="clearFavorites">
                <el-icon><Delete /></el-icon>
                清空收藏
              </el-button>
            </div>
            
            <div class="favorites-grid">
              <div v-for="video in favoriteVideos" :key="video.id" class="favorite-card" @click="goToDetail(video.id)">
                <div class="favorite-thumbnail">
                  <img :src="video.thumbnail" :alt="video.title" />
                  <div class="favorite-overlay">
                    <el-icon><CaretRight /></el-icon>
                  </div>
                </div>
                <div class="favorite-info">
                  <h4>{{ video.title }}</h4>
                  <p>{{ video.description }}</p>
                  <div class="favorite-meta">
                    <span>{{ formatViews(video.views) }} 次观看</span>
                    <span>{{ formatDate(video.created_at) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 观看历史 -->
          <div v-if="activeMenu === 'history'" class="history-section">
            <div class="section-header">
              <h2>观看历史</h2>
              <el-button @click="clearHistory">
                <el-icon><Delete /></el-icon>
                清空历史
              </el-button>
            </div>
            
            <div class="history-list">
              <div v-for="item in watchHistory" :key="item.id" class="history-item" @click="goToDetail(item.video_id)">
                <img :src="item.thumbnail" :alt="item.title" class="history-thumb" />
                <div class="history-info">
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.description }}</p>
                  <div class="history-meta">
                    <span>观看时间：{{ formatTime(item.watched_at) }}</span>
                    <span>观看进度：{{ item.progress }}%</span>
                  </div>
                </div>
                <el-button type="text" @click.stop="removeFromHistory(item.id)">
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>
            </div>
          </div>

        </el-main>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  ElAvatar,
  ElButton,
  ElIcon,
  ElMenu,
  ElMenuItem,
  ElAside,
  ElMain,
  ElTabs,
  ElTabPane,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadioGroup,
  ElRadio
} from 'element-plus'
import {
  User,
  VideoPlay,
  Star,
  Clock,
  Setting,
  Camera,
  Edit,
  Plus,
  Delete,
  CaretRight,
  Close
} from '@element-plus/icons-vue'
import AOS from 'aos'
import 'aos/dist/aos.css'

const router = useRouter()

// 响应式数据
const activeMenu = ref('overview')
const videoTab = ref('all')
const userInfo = ref({
  name: '用户名',
  email: 'user@example.com',
  bio: '这个人很懒，什么都没有写...'
})

const userStats = ref({
  videos: 8, // 更新：2个上传 + 6个点赞
  followers: 1234,
  following: 567,
  likes: 8901
})


// 模拟数据
const recentActivities = ref([
  { id: 1, text: '上传了新视频《精彩内容》', time: new Date(Date.now() - 1000 * 60 * 30) },
  { id: 2, text: '点赞了视频《有趣视频》', time: new Date(Date.now() - 1000 * 60 * 60 * 2) },
  { id: 3, text: '关注了新用户', time: new Date(Date.now() - 1000 * 60 * 60 * 24) }
])

const hotVideos = ref([
  { id: 1, title: '精彩视频1', thumbnail: '/images/videos/video1.jpg', views: 12345 },
  { id: 2, title: '精彩视频2', thumbnail: '/images/videos/video2.jpg', views: 9876 },
  { id: 3, title: '精彩视频3', thumbnail: '/images/videos/video3.jpg', views: 5432 }
])

const userVideos = ref([
  {
    id: 1,
    title: '我的第一个视频',
    description: '这是我上传的第一个视频',
    thumbnail: '/images/videos/video1.jpg',
    duration: '05:30',
    views: 1234,
    likes: 56,
    status: 'published',
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7)
  },
  {
    id: 2,
    title: '草稿视频',
    description: '还在编辑中的视频',
    thumbnail: '/images/videos/video2.jpg',
    duration: '03:45',
    views: 0,
    likes: 0,
    status: 'draft',
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3)
  },
  // 点赞过的视频
  {
    id: 9,
    title: '复仇者联盟',
    description: '漫威超级英雄集结，拯救世界的史诗级动作片',
    thumbnail: '/images/videos/video1.jpg',
    duration: '02:23:00',
    views: 4567,
    likes: 892,
    status: 'liked', // 新增状态：点赞过的视频
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5)
  },
  {
    id: 10,
    title: '速度与激情9',
    description: '极速飞车系列的最新力作，刺激的赛车场面',
    thumbnail: '/images/videos/video2.jpg',
    duration: '02:23:00',
    views: 3892,
    likes: 756,
    status: 'liked',
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3)
  },
  {
    id: 11,
    title: '疯狂动物城',
    description: '迪士尼动画电影，温馨有趣的动物喜剧',
    thumbnail: '/images/videos/video3.jpg',
    duration: '01:32:00',
    views: 5235,
    likes: 1234,
    status: 'liked',
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2)
  },
  {
    id: 12,
    title: '星际空间',
    description: '科幻电影，现实与虚幻的交织，震撼的科幻大片',
    thumbnail: '/images/videos/微信图片_20251027113117.jpg',
    duration: '02:28:00',
    views: 6543,
    likes: 1876,
    status: 'liked',
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 1)
  },
  {
    id: 13,
    title: '泰坦尼克号',
    description: '经典爱情电影，跨越时空的浪漫爱情故事',
    thumbnail: '/images/videos/微信图片_20251027113122.jpg',
    duration: '01:46:00',
    views: 4321,
    likes: 987,
    status: 'liked',
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 12)
  },
  {
    id: 14,
    title: '青春之歌',
    description: '青春校园电影，关于青春与爱情的冒险',
    thumbnail: '/images/videos/微信图片_20251027113127.jpg',
    duration: '01:52:00',
    views: 3456,
    likes: 765,
    status: 'liked',
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 6)
  }
])

const favoriteVideos = ref([
  // 收藏的视频
  {
    id: 15,
    title: '肖申克的救赎',
    description: '经典励志电影，关于希望与自由的感人故事',
    thumbnail: '/images/videos/video1.jpg',
    views: 9877,
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 4)
  },
  {
    id: 16,
    title: '阿甘正传',
    description: '励志电影，一个平凡人的不平凡人生',
    thumbnail: '/images/videos/video2.jpg',
    views: 8765,
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 6)
  },
  {
    id: 17,
    title: '盗梦空间',
    description: '科幻悬疑电影，梦境与现实的复杂交织',
    thumbnail: '/images/videos/video3.jpg',
    views: 7654,
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 8)
  },
  {
    id: 18,
    title: '星际穿越',
    description: '科幻电影，探索宇宙与时间的奥秘',
    thumbnail: '/images/videos/video4.jpg',
    views: 5432,
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 10)
  },
  {
    id: 7,
    title: '星际穿越',
    description: '诺兰执导的科幻巨作，探索时间与空间的奥秘',
    thumbnail: '/images/videos/微信图片_20251027113122.jpg',
    views: 1893,
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 12)
  },
  {
    id: 1,
    title: '速度与激情10',
    description: '经典动作系列的最新力作，刺激的赛车场面',
    thumbnail: '/images/videos/video1.jpg',
    views: 1252,
    created_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 15)
  }
])

const watchHistory = ref([
  {
    id: 1,
    video_id: 1,
    title: '观看过的视频1',
    description: '昨天观看的视频',
    thumbnail: '/images/videos/video1.jpg',
    watched_at: new Date(Date.now() - 1000 * 60 * 60 * 24),
    progress: 85
  },
  {
    id: 2,
    video_id: 2,
    title: '观看过的视频2',
    description: '前天观看的视频',
    thumbnail: '/images/videos/video2.jpg',
    watched_at: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2),
    progress: 100
  }
])

// 方法
const handleMenuSelect = (index) => {
  activeMenu.value = index
}

const handleVideoTabChange = (tab) => {
  videoTab.value = tab
  // 这里可以根据tab加载不同的视频数据
}

const editProfile = () => {
  // 编辑资料逻辑
  console.log('编辑资料')
}

const uploadVideo = () => {
  // 上传视频逻辑
  console.log('上传视频')
}

const clearFavorites = () => {
  // 清空收藏逻辑
  console.log('清空收藏')
}

const clearHistory = () => {
  // 清空历史逻辑
  console.log('清空历史')
}

const removeFromHistory = (id) => {
  // 从历史记录中移除
  console.log('移除历史记录', id)
}


// 方法
const goToPage = (path) => {
  router.push(path)
}

const goToDetail = (id) => {
  router.push(`/detail/${id}`)
}

const getStatusText = (status) => {
  const statusMap = {
    published: '已发布',
    draft: '草稿',
    deleted: '已删除',
    liked: '已点赞' // 新增：点赞过的视频
  }
  return statusMap[status] || '未知'
}

const formatViews = (views) => {
  if (views >= 10000) {
    return (views / 10000).toFixed(1) + '万'
  }
  return views.toString()
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const formatTime = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

onMounted(() => {
  AOS.init({
    duration: 1000,
    easing: 'ease-in-out'
  })
})
</script>

<style scoped>
.user-profile {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  background: #f9fafb;
  margin: 0;
  padding: 0;
}

/* 用户信息头部 */
.profile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem 0;
  position: relative;
}

.profile-banner {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.profile-info {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 100%;
}

.avatar-container {
  position: relative;
}

.profile-avatar {
  border: 4px solid white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.edit-avatar-btn {
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-radius: 20px;
}

.user-details {
  color: white;
  flex: 1;
}

.username {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.user-email {
  font-size: 1.1rem;
  margin: 0 0 1.5rem 0;
  opacity: 0.9;
}

.user-stats {
  display: flex;
  gap: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 主要内容区域 */
.profile-content {
  padding: 0;
  width: 100%;
  min-height: calc(100vh - 200px);
}

.content-container {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  width: 100%;
  height: 100%;
}

.profile-sidebar {
  background: white;
  border-radius: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 1rem 0;
  height: 100vh;
  position: sticky;
  top: 0;
}

.profile-main {
  background: #f9fafb;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  flex: 1;
  min-height: 100vh;
}

/* 区域标题 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.section-header h2 {
  margin: 0;
  color: #1f2937;
  font-size: 1.5rem;
}

/* 概览区域 */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  max-width: none;
}

.overview-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 1.5rem;
}

.overview-card h3 {
  margin: 0 0 1rem 0;
  color: #374151;
  font-size: 1.1rem;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.activity-icon {
  color: #667eea;
  font-size: 1.2rem;
}

.activity-content {
  flex: 1;
}

.activity-text {
  margin: 0 0 0.25rem 0;
  color: #374151;
  font-size: 0.9rem;
}

.activity-time {
  color: #9ca3af;
  font-size: 0.8rem;
}

.hot-videos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hot-video-item {
  display: flex;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hot-video-item:hover {
  transform: translateX(4px);
}

.hot-video-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.hot-video-info h4 {
  margin: 0 0 0.25rem 0;
  color: #1f2937;
  font-size: 0.9rem;
}

.hot-video-info p {
  margin: 0;
  color: #6b7280;
  font-size: 0.8rem;
}

/* 视频区域 */
.video-tabs {
  margin-bottom: 2rem;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  max-width: none;
}

.video-card {
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.video-status {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.video-status.published {
  background: #10b981;
  color: white;
}

.video-status.draft {
  background: #f59e0b;
  color: white;
}

.video-status.deleted {
  background: #ef4444;
  color: white;
}

.video-status.liked {
  background: #8b5cf6;
  color: white;
}

.video-info {
  padding: 1rem;
}

.video-title {
  margin: 0 0 0.5rem 0;
  color: #1f2937;
  font-size: 1rem;
  font-weight: 600;
}

.video-description {
  margin: 0 0 1rem 0;
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.4;
}

.video-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #9ca3af;
}

/* 收藏区域 */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.favorite-card {
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.favorite-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.favorite-thumbnail {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
}

.favorite-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.favorite-card:hover .favorite-overlay {
  opacity: 1;
}

.favorite-info {
  padding: 1rem;
}

.favorite-info h4 {
  margin: 0 0 0.5rem 0;
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 600;
}

.favorite-info p {
  margin: 0 0 1rem 0;
  color: #6b7280;
  font-size: 0.8rem;
  line-height: 1.4;
}

.favorite-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #9ca3af;
}

/* 历史区域 */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.history-item:hover {
  background: #f3f4f6;
}

.history-thumb {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.history-info {
  flex: 1;
}

.history-info h4 {
  margin: 0 0 0.5rem 0;
  color: #1f2937;
  font-size: 1rem;
  font-weight: 600;
}

.history-info p {
  margin: 0 0 0.5rem 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.history-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #9ca3af;
}


/* 视频区域样式 */
.videos-section {
  padding: 2rem 3rem;
  background: white;
  margin: 0;
  min-height: 100vh;
}

.favorites-section {
  padding: 2rem 3rem;
  background: white;
  margin: 0;
  min-height: 100vh;
}

.overview-section {
  padding: 2rem 3rem;
  background: white;
  margin: 0;
  min-height: 100vh;
}

.history-section {
  padding: 2rem 3rem;
  background: white;
  margin: 0;
  min-height: 100vh;
}


.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  max-width: none;
}

.favorite-card {
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.favorite-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.favorite-thumbnail {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.favorite-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.favorite-card:hover .favorite-overlay {
  opacity: 1;
}

.favorite-overlay .el-icon {
  color: white;
  font-size: 24px;
}

.favorite-info {
  padding: 1rem;
}

.favorite-info h4 {
  margin: 0 0 0.5rem 0;
  color: #1f2937;
  font-size: 1rem;
  font-weight: 600;
}

.favorite-info p {
  margin: 0 0 0.5rem 0;
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.4;
}

.favorite-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #9ca3af;
}

/* 响应式设计 */
/* 响应式设计 - 优化版本 */
@media (min-width: 1920px) {
  .videos-section,
  .favorites-section,
  .overview-section,
  .history-section {
    padding: 2rem 5rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
  
  .overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  }
  
  .profile-sidebar {
    width: 350px;
  }
}

@media (min-width: 1600px) {
  .videos-section,
  .favorites-section,
  .overview-section,
  .history-section {
    padding: 2rem 4.5rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  
  .overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  }
  
  .profile-sidebar {
    width: 320px;
  }
}

@media (min-width: 1400px) {
  .videos-section,
  .favorites-section,
  .overview-section,
  .history-section {
    padding: 2rem 4rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
  
  .profile-sidebar {
    width: 300px;
  }
}

@media (min-width: 1200px) {
  .videos-section,
  .favorites-section,
  .overview-section,
  .history-section {
    padding: 2rem 3.5rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  .overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  
  .profile-sidebar {
    width: 280px;
  }
}

@media (min-width: 992px) {
  .videos-section,
  .favorites-section,
  .overview-section,
  .history-section {
    padding: 2rem 3rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  
  .overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .profile-sidebar {
    width: 260px;
  }
}

@media (min-width: 768px) {
  .videos-section,
  .favorites-section,
  .overview-section,
  .history-section {
    padding: 2rem 2.5rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  
  .overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  .profile-sidebar {
    width: 240px;
  }
}

@media (min-width: 576px) {
  .videos-section,
  .favorites-section,
  .overview-section,
  .history-section {
    padding: 2rem 2rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  
  .overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  
  .profile-sidebar {
    width: 220px;
  }
}

@media (max-width: 575px) {
  .profile-info {
    flex-direction: column;
    text-align: center;
  }
  
  .user-stats {
    justify-content: center;
  }
  
  .content-container {
    flex-direction: column;
  }
  
  .profile-sidebar {
    width: 100% !important;
  }
  
  .overview-grid {
    grid-template-columns: 1fr;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .videos-section,
  .favorites-section,
  .overview-section,
  .history-section {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .videos-section,
  .favorites-section,
  .overview-section,
  .history-section {
    padding: 1rem;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

</style>